<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唯品会网站注册</title>
    <link rel="stylesheet" href="./reg.css">
    <!-- <script src="./reg.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="box">
        <div id="box-content">
            <div id="box-head">
                <a href="index.html"></a>
                <span></span>
            </div>
            <div id="content">

                <div id="reg">
                    <div id="reg-content">
                    <h3>会员注册<span  id="ospan">已注册可<a href="login.html">直接登录</a></span></h3>
                    <input type="text" name="" id="ipt1" placeholder="请输入手机号码">
                    <span id="sp1"></span>
                    <b></b>
                    <input type="text" name="" id="ipt2" placeholder="密码由8-20位字母,数字和符号组合">
                    <span id="sp2"></span>
                    <b></b>
                    <input type="text" name="" id="ipt3" placeholder="请再次输入上面的密码">
                   
                    <b id="ob"></b>
                    
                    <input type="checkbox" name="" id="checkbox">
                    <span id="fontsize">我已阅读并接受以下条款：《唯品会服务条款》《唯品会隐私政策》《唯品支付用户服务协议》</span> 

                    <button>立即注册</button>
                
                </div>
                </div>

            </div>
            <p id="op"></p>
            <div id="nav">
                <div id="nav-box">
                    <ul>
                        <p style="margin-bottom: 5px;">正品保障</p>
                        <li>服务保障</li>
                        <li>七天无理由放心退</li>
                        <li>7*15小时客户服务</li>
                    </ul>
                    <ul>
                        <p style="margin-bottom: 5px;">购物指南</p>
                        <li>导购演示</li>
                        <li>订单操作</li>
                        <li>会员注册</li>
                        <li>账户管理</li>
                        <li>收货样品</li>
                    </ul>
                    <ul>
                        <p style="margin-bottom: 5px;">支付方式</p>
                        <li>23家主流网银支付</li>
                        <li>支付宝、银联等支付</li>
                        <li>信用卡支付</li>
                    </ul>
                    <ul>
                        <p style="margin-bottom: 5px;">配送方式</p>
                        <li>配送范围及运费</li>
                        <li>验货与签收</li>
                    </ul>
                    <ul>
                        <p style="margin-bottom: 5px;">售后服务</p>
                        <li>退货政策</li>
                        <li>退货流程</li>
                        <li>退款方式和时效</li>
                        <li>换货服务</li>
                    </ul>
                    <ul>
                      
                    </ul>

                </div>
                <ul id="list">
                    <li>关于我们&nbsp;</li>
                    <li>About us&nbsp; </li>
                    <li>Investor Relations&nbsp; </li>
                    <li>媒体报道&nbsp; </li>
                    <li>品牌招商&nbsp; </li>
                    <li>平台规则&nbsp; </li>
                    <li>隐私条款&nbsp; </li>
                    <li>唯品诚聘 &nbsp;</li>
                    <li>唯品卡&nbsp; </li>
                    <li>联系我们&nbsp; </li>
                    <li>廉正举报 &nbsp;</li>

                </ul>
            </div>
            <div id="box-bottom">
                <p>Copyright © 2008-现在 vip.com，All Rights Reserved  使用本网站即表示接受 唯品会用户协议。版权所有 广州唯品会电子商务有限公司</p>
                <p>粤公网安备 44010302111111号    粤ICP备08114786号 增值业务经营许可证：粤B2-20170777 网络文化经营许可证：粤网文〔2021〕2056-282号</p>
                <p>经营主体证照   风险监测信息   互联网药品信息服务资格证书：（粤）-经营性-2018-0271 网络食品交易第三方平台备案凭证：粤B2-20170777 医疗器械网络交易服务第三方平台备案凭证：（粤）网械平台备字[2019]第00001号 出版物网络交易平台服务经营备案证：粤新出网备（2021）1号  未成年人关怀专区</p>
                <p>违法和不良信息举报电话：4006789888；举报邮箱：privacy@vipshop.com</p>
            </div>
        </div>
    </div>
    <script>
        let ipts = document.querySelectorAll('input')
        let btn = document.querySelector("button")
        let ob = document.querySelectorAll('b')
        let sp1 = document.querySelector("#sp1")
        let sp2 = document.querySelector("#sp2")
        
        let checkbox = document.querySelector("#checkbox")
        let isUsername = false
        let isPassword = false


        ipts[0].onchange = function(){
            console.log(111);
            let str = ipts[0].value;
            let reg = /^1[3456789]\d{9}$/;
            // let reg = /^\w{3,6}$/
            if(reg.test(str)){
                console.log('正确');
                sp1.style.display = 'block'
                ob[0].innerHTML = ""
                ipts[0].style.borderColor = 'black'
                isUsername = true
                console.log(isUsername);


                
            }else if(str == ""){
                ob[0].innerHTML = "手机号不能为空"
                isUsername = false
            }else{
                console.log('错误');
                ipts[0].style.borderColor = 'red'
                ob[0].innerHTML = "请输入正确的手机号"
                ob[0].style.color = 'red'
                isUsername = false;
                
            }

        }
        ipts[1].onchange = function(){
            let str = ipts[1].value
            let reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,20}$/
            // let reg = /^\w{3,6}$/
            if(reg.test(str)){
                console.log(123);
                sp2.style.display = 'block'
                ob[1].innerHTML = ""
                isPassword = true
            }else{
                console.log(1111);
                ob[1].innerHTML = "密码过于简单，有被盗风险，建议您更改为复杂密码"
                ob[1].style.color = 'red'
                isPassword = false
            }

        }

        ipts[2].onchange = function(){
            if(ipts[2].value == ipts[1].value){
                sp3.style.display = 'block'
                ob[2].innerHTML = ""
                // let isPassword = true
            }else{
                ob[2].innerHTML = '两次输入的密码不一致，请重试'
                ob[2].style.color = 'red'
                // let isPassword = false
            }


        }




        btn.onclick = function(){
            // console.log(checkbox.checked);
            if(checkbox.checked&&isUsername&&isPassword){
                console.log('正确');

                let url = 'http://jx.xuzhixiang.top/ap/api/reg.php'
                let username = ipts[0].value
                let password = ipts[1].value

                console.log(username,password);
                axios.get(url,{ params: { username, password } }).then((r)=>{
                    console.log(r.data);
                    if(r.data.code = 1){
                        console.log('注册成功');

                        location.href = "login.html"
                        alert(r.data.msg)

                    }else if (r.data.code == 0) {
                        alert(r.data.msg)
                    }


                })


            }else{
                console.log('错误');
            }
        }
    </script>
</body>
</html>